<template>
  <n-modal v-model:show="props.showContentModal" @update:show="updateModal">
    <n-card
      style="max-height: 650px;width: 600px;position: fixed;top: 50px;left: calc(50% - 300px);"
      title=""
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
      :segmented="segmented"
    >
      <template #header>
        <div style="display: flex;justify-content: space-between;align-items: center;">
          <div style="display: flex;justify-content: flex-start;align-items: center;">
            <div>
              <n-avatar
                round
                size="small"
                :src="host + '/api/' + essayData.avatar"
              />
            </div>
            <div style="padding-left: 10px;">
              <div style="font-size: 17px;">{{ essayData.username }}</div>
              <div style="font-size: 12px;color: gray;">{{ essayData.create_time.replace("T", " ") }}</div>
            </div>
          </div>
          <n-icon
          style="cursor: pointer;"
          :component="CloseOutline"
          size="22"
          @click="closeModal"/>  
        </div>
            
      </template>
      <n-scrollbar style="max-height: 400px">
        <div class="modalContent">{{ essayData.essay_content }}</div>
        <!-- 文章图片 -->
        <div class="content_imgs" v-if="essayData.images[0]">
          <n-image
            v-for="item in essayData.images" :key="item"
            style="margin-right: 20px;margin-top: 20px;"
            height="100"
            :lazy="true"
            :src="host + '/api/' + item"
          />
        </div>
      </n-scrollbar>
      
      <div class="likePeople">
        <n-avatar
        v-for="item in essayData.LikePeople"
        round
        size="small"
        :src="host + '/api/' + item.lavatar"
        :key="item.lphone"
        />
        <div v-if="essayData.LikePeople[0]" style="font-size: 13px;color: gray;margin-left: 10px;">{{ essayData.LikePeople.length }}人赞过</div>
      </div>
    </n-card>
  </n-modal>
</template>

<script setup lang='ts'>
import {essayListType} from "../types"
import { CloseOutline } from '@vicons/ionicons5'
import {ref,inject} from "vue"

const host = ref(inject("host"));

const props = defineProps<{
  showContentModal: boolean,
  essayData: essayListType
}>()

const segmented = ref({
  content: 'soft',
  footer: 'soft'
} as const)

const emits = defineEmits<{
  close_modal: []
}>()

const closeModal = () => {
  emits("close_modal")
}

const updateModal = () => {
  emits("close_modal")
}
  
</script>

<style lang='scss' scoped>
.modalContent{
  padding: 15px;
  white-space:pre-wrap;
  overflow: hidden;
  // text-overflow: ellipsis;
  display: -webkit-box;
  // -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
}
.content_imgs{
  padding: 0 15px 15px 15px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.likePeople{
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}  
</style>